<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <p:panelGrid id="bloque3" columns="2" style="width:100%">
            <p:panelGrid id="indicadorDescripcion" columns="1">
                <p:outputLabel value="Nombre del Indicador" for="idIndicadorText" />

                <p:inputTextarea id="idIndicadorText"
                                 value="#{objetivoEstrategicoController.indicador.nombreIndicador}"
                                 title="Indicador"
                                 placeholder="Ingrese aqui  el nombre del indicador"
                                 required="true"
                                 requiredMessage="Nombre del inidcador Requerida"/>

                <p:outputLabel value="Aclaracion" for="idAclaracionText" />

                <p:inputTextarea id="idAclaracionText"
                                 value="#{objetivoEstrategicoController.indicador.aclaracion}"
                                 title="Aclaracion"
                                 placeholder="Ingrese aqui la aclaracion del objetivo estrategico"/>

                <p:outputLabel value="Conceptualizacion" for="idConceptualizacionText" />

                <p:inputTextarea id="idConceptualizacionText"
                                 value="#{objetivoEstrategicoController.indicador.conceptualizacion}"
                                 title="Conceptualizacion"
                                 placeholder="Ingrese aqui la conceptualizacion del objetivo estrategico"/>
                <p:outputLabel value="Formula" for="idFormulaText" />

                <p:inputTextarea id="idFormulaText"
                                 value="#{objetivoEstrategicoController.indicador.formula}"/>
            </p:panelGrid>
            <p:panelGrid  columns="1" style="width:100%">
                <p:panelGrid id="indicadorFormulacion" columns="3" style="width:100%">
                    <p:panelGrid  columns="1">
                        <p:outputLabel value="Unidades" for="idUnidadesText" />

                        <p:inputText id="idUnidadesText"
                                     value="#{objetivoEstrategicoController.indicador.unidades}"
                                     title="Unidades"
                                     placeholder="Ingrese aqui  la Unidad"
                                     required="true"
                                     requiredMessage="Unidad Requerida"/>
                    </p:panelGrid>
                    <p:panelGrid  columns="1"> 
                        <p:outputLabel value="Periodicidad" for="idPeriodicidadText" />

                        <p:inputText id="idPeriodicidadText"
                                     value="#{objetivoEstrategicoController.indicador.periodicidad}"
                                     title="Periodicidad"
                                     placeholder="Ingrese aqui la Periodicidad"
                                     required="true"
                                     requiredMessage="Periodicidad Requerida"/>

                    </p:panelGrid>
                    <p:panelGrid  columns="1" > 
                        <p:outputLabel value="EstadoActual" for="idEstadoActualText" />
                        <p:inputText id="idEstadoActualText"
                                     value="#{objetivoEstrategicoController.indicador.estadoActual}"
                                     title="Formula"
                                     disabled="true"/>
                    </p:panelGrid>
                </p:panelGrid>
                <p:panelGrid id="indicadorRestriccion" columns="2" style="width:100%">

                    <h:panelGrid columns="3" cellpadding="10">
                        <p:outputPanel >
                            <p:outputLabel value="Min" for="idBajoMinText" style="color: #FF0000"/>
                            <p:inputText id="idBajoMinText"
                                         style="background-color: #ebcccc; size: auto"
                                         value="#{objetivoEstrategicoController.indicador.bajoMinimo}"
                                         title="Minimo"
                                         placeholder="Valor minimo"/>
                        </p:outputPanel>
                        <p:graphicImage value="../../resources/img/rojo.png" width="40" height="40" /> 
                        <p:outputPanel >
                            <p:outputLabel value="Max" for="idBajoMaxText" style="color: #FF0000"/>
                            <p:inputText id="idBajoMaxText"
                                         style="background-color: #ebcccc; size: auto"
                                         value="#{objetivoEstrategicoController.indicador.altoMinimo}"
                                         title="Maximo"
                                         placeholder="Valor maximo"/>
                        </p:outputPanel>
                        <p:outputPanel >
                            <p:outputLabel value="Min" for="idMedioMinText" style="color: #FFCC00"/>
                            <p:inputText id="idMedioMinText"
                                         style="background-color: #EAEA95; size: auto"
                                         value="#{objetivoEstrategicoController.indicador.medioMinimo}"
                                         title="Minimo"
                                         placeholder="Valor minimo"/>
                        </p:outputPanel>
                        <p:graphicImage value="../../resources/img/amarillo.png" width="40" height="40" /> 
                        <p:outputPanel >
                            <p:outputLabel value="Max" for="idMedioMaxText" style="color: #FFCC00"/>
                            <p:inputText id="idMedioMaxText"
                                         style="background-color: #EAEA95; size: auto"
                                         value="#{objetivoEstrategicoController.indicador.medioMaximo}"
                                         title="Maximo"
                                         placeholder="Valor maximo"/>
                        </p:outputPanel>
                        <p:outputPanel >
                            <p:outputLabel value="Min" for="idAltoMinText" style="color: #009933"/>
                            <p:inputText id="idAltoMinText"
                                         style="background-color: #6ADA6A; size: auto"
                                         value="#{objetivoEstrategicoController.indicador.bajoMaximo}"
                                         title="Minimo"
                                         placeholder="Valor minimo"/>
                        </p:outputPanel>
                        <p:graphicImage value="../../resources/img/verde.png" width="40" height="40" /> 
                        <p:outputPanel >
                            <p:outputLabel value="Max" for="idAltoMaxText" style="color: #009933"/>
                            <p:inputText id="idAltoMaxText"
                                         style="background-color: #6ADA6A; size: auto"
                                         value="#{objetivoEstrategicoController.indicador.altoMaximo}"
                                         title="Maximo"
                                         placeholder="Valor maximo"/>
                        </p:outputPanel>
                    </h:panelGrid>


                </p:panelGrid>
            </p:panelGrid>


            <p:panelGrid id="bloque5" columns="2" style="width:100%">
                <p:panelGrid columns="1">
                    <p:inputTextarea id="idVariableText"
                                     value="#{objetivoEstrategicoController.componenteFormula.formula}"
                                     title="Variable nueva"
                                     placeholder="Ingrese aqui la variable"/>
                    <p:commandButton id="agregarVariableButton" icon="ui-icon-check"   value="Agregar Variables" 
                                     action="#{objetivoEstrategicoController.addComponenteFormula}" 
                                     update=":crudOE:tabView1:idVariablesText,idVariableText,:growl" />
                </p:panelGrid>
                <h:panelGroup id="panelVariables">
                    <p:dataScroller value="#{objetivoEstrategicoController.itemsComponenteFormula}" var="varItem" chunkSize="10" id="idVariablesText">
                        <f:facet name="header">
                            <h:outputText value="VARIABLES"/>
                        </f:facet>
                        <h:panelGrid columns="2" style="width:100%">

                            <h:outputText value="#{varItem.formula}"/>
                            <p:commandButton id="deleteButton" icon="ui-icon-closethick"   
                                             actionListener="#{objetivoEstrategicoController.deleteItemsComponenteFormula(varItem)}" 
                                             update=":crudOE:tabView1:idVariablesText, :growl" />
                            <span class="ui-separator">
                                <span class="ui-icon  ui-icon-grip-dotted-horizontal" />
                            </span>
                        </h:panelGrid> 

                    </p:dataScroller>
                </h:panelGroup>

            </p:panelGrid>


        </p:panelGrid>
    
    
    
    
    
    
    
    


</html>
